var vm = new Vue({
    el: '#container'
    , data: {
        buttons: {}
        , query: {
            page: 1
            , pageSize: hcCore.pageSize
        }
        , tableData: {
            records: []
            , total: 0
        }
        , pageInfo: {
            data: []
        }
        , selected: {
            pageNo: ''
            , sysNo: ''
        }
        , devInfo: {
            data: []
            , activeName: ''
            , visible: false
            , form: {
                dev_name: ''
                , dev_desc: ''
                , op_type: 'add'
                , pkid: ''
            }
        }
        , interface: {
            records: []
            , visible: false
            , form: {
                interface_id: ''
                , interface_name: ''
                , interface_type: ''
                , interface_url: ''
                , request_method: ''
                , request_example: ''
                , response_example: ''
                , headers: []
                , request_params: []
                , response_params: []
            }
        }
        , activeTabsName: 'details'
        , edit: {
            formId: 'editFrame'
            , title: '操作'
            , visible: false
            , fields: [{
                label: '系统编号'
                , name: 'sys_no'
                , require: true
                , type: 'hidden'
                , value: ''
                , placeholder: '请输入系统编号'
                , rules: {
                    required: true, message: '系统编号不能为空', trigger: 'blur'
                }
            },{
                label: '上级页面编号'
                , name: 'page_pno'
                , require: true
                , type: 'hidden'
                , value: ''
                , placeholder: '请输入页面编号'
                , rules: {
                    required: true, message: '页面编号不能为空', trigger: 'blur'
                }
            }, {
                label: '上级页面'
                , name: 'page_pname'
                , require: true
                , type: 'text'
                    , disabled: true
                    , readonly: true
                , value: ''
                , placeholder: '请输入页面'
                , rules: {
                    required: false, message: '页面编号不能为空', trigger: 'blur'
                }
            }, {
                label: '页面编号'
                , name: 'page_no'
                , require: true
                , type: 'text'
                , disabled: false
                , value: ''
                , placeholder: '请输入页面编号'
                , rules: {
                    required: true, message: '页面编号不能为空', trigger: 'blur'
                }
            }, {
                label: '页面名称'
                , name: 'page_name'
                , require: true
                , type: 'text'
                , disabled: false
                , value: ''
                , placeholder: '请输入页面名称'
                , rules: {
                    required: true, message: '页面名称不能为空', trigger: 'blur'
                }
            }]
            , op: function () {
            }
        }
        , interfaceEdit: {
            formId: 'editInterfaceFrame'
            , title: '操作'
            , visible: false
            , fields: [{
                label: ''
                , name: 'interface_id'
                , require: true
                , type: 'text'
                , disabled: false
                , value: ''
                , placeholder: '请输入'
                , rules: {
                    required: true, message: '不能为空', trigger: 'blur'
                }
            }, {
                label: '接口名称'
                , name: 'interface_name'
                , require: true
                , type: 'text'
                , disabled: false
                , value: ''
                , placeholder: '请输入接口名称'
                , rules: {
                    required: true, message: '接口名称不能为空', trigger: 'blur'
                }
            }, {
                label: '接口类型'
                , name: 'interface_type'
                , require: true
                , type: 'text'
                , disabled: false
                , value: ''
                , placeholder: '请输入接口类型'
                , rules: {
                    required: true, message: '接口类型不能为空', trigger: 'blur'
                }
            }, {
                label: '接口网址'
                , name: 'interface_url'
                , require: true
                , type: 'text'
                , disabled: false
                , value: ''
                , placeholder: '请输入接口网址'
                , rules: {
                    required: true, message: '接口网址不能为空', trigger: 'blur'
                }
            }, {
                label: '接口请求方法'
                , name: 'request_method'
                , require: true
                , type: 'text'
                , disabled: false
                , value: ''
                , placeholder: '请输入接口请求方法'
                , rules: {
                    required: true, message: '接口请求方法不能为空', trigger: 'blur'
                }
            }, {
                label: '接口请求实例'
                , name: 'request_example'
                , require: true
                , type: 'text'
                , disabled: false
                , value: ''
                , placeholder: '请输入接口请求实例'
                , rules: {
                    required: true, message: '接口请求实例不能为空', trigger: 'blur'
                }
            }, {
                label: '响应实例'
                , name: 'response_example'
                , require: true
                , type: 'text'
                , disabled: false
                , value: ''
                , placeholder: '请输入响应实例'
                , rules: {
                    required: true, message: '响应实例不能为空', trigger: 'blur'
                }
            }]
            , op: function () {
            }
        }
    }
    , mounted: async function () {
        const me = this;
        me.buttons = await hcCore.getPowerButton();
        if (me.buttons.hasQuery) {
            me.getSysList();
        }
    }
    , methods: {
        handleButton: function (act_no, row) {
            switch (act_no) {
                case 'Add':
                    this.showEdit('add', '新增', row);
                    break;
                case 'Edit':
                    this.showEdit('edit', '编辑', row);
                    break;
                case 'Delete':
                    this.onDelete(row);
                    break;
                default:
                    break;
            }
        }
        , handleInterfaceButton: function (act_no, row) {
            switch (act_no) {
                case 'Add':
                    this.showInterfaceEdit('add', '新增');
                    break;
                case 'Edit':
                    this.showInterfaceEdit('edit', '编辑', row);
                    break;
                case 'Delete':
                    this.onInterfaceDelete(row);
                    break;
                default:
                    break;
            }
        }
        , handleDevButton: function (act_no, row) {
            switch (act_no) {
                case 'Add':
                    this.showDevEdit('add', '新增');
                    break;
                case 'Edit':
                    this.showDevEdit('edit', '编辑', row);
                    break;
                case 'Delete':
                    this.onDevDelete(row);
                    break;
                default:
                    break;
            }
        }
        , onQuery: function (row, column, event) {
            let me = this;
            hcCore.post({
                url: '/Page/Tree'
                , param: {
                    sys_no: row.sys_no
                }
                , success: function (rsp) {
                    me.pageInfo.data = [{
                        page_no: '-'
                        , page_name: row.sys_name
                        , children: rsp.data
                    }]
                    setTimeout(() => {
                        me.$refs.pageInfo.store.nodesMap['-'].expanded = true;
                    }, 10);
                }
            });
        }
        , getSysList: function () {
            let me = this;
            hcCore.post({
                url: '/Page/ListSys'
                , success: function (rsp) {
                    me.tableData.records = rsp.data;
                }
            });
        }
        , onPageChange: function (page) {
            this.query.page = page;
            this.onQuery();
        }
        , showEdit: async function (type, title, row) {
            let me = this;
            me.resetParams(me.edit.fields);
            let item = me.edit.fields.find(p => p.name == 'page_pno');
            if (item) {
                item.value = row.page_no;
            }
            item = me.edit.fields.find(p => p.name == 'page_pname');
            if (item) {
                item.value = row.page_name;
            }
            item = me.edit.fields.find(p => p.name == 'sys_no'); 
            if (item) {
                item.value = row.sys_no;
            }
            me.edit.title = title;
            me.edit.op = type == 'add' ? me.onInsert : (type == 'edit' ? me.onUpdate : function () { });
            if (type == 'edit') {
                if (row) {
                    await hcCore.post({
                        url: '/Page/Get/' + row.page_no
                        , success: function (rsp) {
                            me.edit.fields.forEach((item, index) => {
                                if (rsp.data[item.name]) {
                                    item.value = rsp.data[item.name];
                                }

                                if (item.name == 'page_no') {
                                    item.disabled = true;
                                }
                            });
                            let item = me.edit.fields.find(p => p.name == 'page_pname'); 
                            if (item) {
                                let tempNode = me.getSelectedRecord(me.pageInfo.data, rsp.data.page_pno);
                                item.value = tempNode && tempNode.page_name;
                            }
                        }
                        , fault: '获得数据失败'
                    });
                }
                else {
                    hcCore.showError('请选择要编辑的记录');
                    return;
                }
            } else {

            }
            me.edit.visible = true;
        }
        , showInterfaceEdit: async function (type, title, row) {
            let me = this;
            me.resetParams(me.interfaceEdit.fields);
            me.interfaceEdit.title = title;
            me.interfaceEdit.op = type == 'add' ? me.onInterfaceInsert : (type == 'edit' ? me.onInterfaceUpdate : function () { });
            if (type == 'edit') {
                if (row) {
                    await hcCore.post({
                        url: '/Interface/Get/' + row.interface_id
                        , success: function (rsp) {
                            me.interfaceEdit.fields.forEach((item, index) => {
                                if (rsp.data[item.name]) {
                                    item.value = rsp.data[item.name];
                                }

                                if (item.name == 'page_no') {
                                    item.disabled = true;
                                }
                            });
                        }
                        , fault: '获得数据失败'
                    });
                }
                else {
                    hcCore.showError('请选择要编辑的记录');
                    return;
                }
            } else {

            }
            me.interface.visible = true;
        }
        , showDevEdit: async function (type, title, row) {
            let me = this;
            if (type == 'edit') {
                await hcCore.post({
                    url: '/PageDev/Get/' + row.pkid
                    , loading: false
                    , success: function (rsp) {
                        me.devInfo.form.dev_name = rsp.data.dev_name;
                        me.devInfo.form.dev_desc = rsp.data.dev_desc;
                        me.devInfo.form.pkid = rsp.data.pkid;
                        me.devInfo.form.page_no = rsp.data.page_no;
                    }
                    , fault: '获得数据失败'
                });
            }
            else {
                me.devInfo.form.dev_name = '';
                me.devInfo.form.dev_desc = '';
            }
            me.devInfo.visible = true;
        }
        , confirmDev: function () {
            let me = this;
            if (me.devInfo.form.op_type != 'add') {
                me.onDevUpdate();
            }
            else {
                me.onDevInsert();
            }
        }
        , onInsert: function () {
            let me = this;
            me.$refs.edit.$refs[me.edit.formId].validate((valid) => {
                if (valid) {
                    hcCore.post({
                        url: '/Page/Insert'
                        , param: me.getParams()
                        , success: function (rsp) {
                            hcCore.showSuccess('新增成功');

                            me.insertRecord(me.pageInfo.data, rsp.data);
                            me.edit.visible = false;
                        }
                    });
                } else {
                    return false;
                }
            });
        }
        , onInterfaceInsert: function () {
            let me = this;
            me.$refs.interfaceEdit.$refs[me.interfaceEdit.formId].validate((valid) => {
                if (valid) {
                    hcCore.post({
                        url: '/Interface/Insert'
                        , param: me.getInterfaceParams()
                        , success: function (rsp) {
                            hcCore.showSuccess('新增成功');
                            me.interface.records.push(rsp.data);
                            me.interface.total += 1;
                            me.interfaceEdit.visible = false;
                        }
                    });
                } else {
                    return false;
                }
            });
        }
        , onDevInsert: function () {
            let me = this;
            let url = '/PageDev/Insert';
            hcCore.post({
                url: url
                , param: {
                    dev_name: me.devInfo.form.dev_name
                    , dev_desc: me.devInfo.form.dev_desc
                    , page_no: me.selected.pageNo
                }
                , success: function (rsp) {
                    me.devInfo.data.push(rsp.data);
                    me.devInfo.visible = false;
                }
            });
        }
        , onUpdate: function () {
            let me = this;
            me.$refs.edit.$refs[me.edit.formId].validate((valid) => {
                if (valid) {
                    hcCore.post({
                        url: '/Page/Update'
                        , param: me.getParams()
                        , success: function (rsp) {
                            hcCore.showSuccess('更新成功');
                            let row = me.getSelectedRecord(me.pageInfo.data, rsp.data.page_no);
                            row.page_name = rsp.data.page_name;
                            //rsp.data.children = row.children;
                            //me.removeSelectedRecords(me.pageInfo.data, [rsp.data.page_no]);
                            //me.insertRecord(me.pageInfo.data, rsp.data);
                            me.edit.visible = false;
                        }
                    });
                } else {
                    return false;
                }
            });
        }
        , onInterfaceUpdate: function () {
            let me = this;
            me.$refs.interfaceEdit.$refs[me.interfaceEdit.formId].validate((valid) => {
                if (valid) {
                    hcCore.post({
                        url: '/Interface/Update'
                        , param: me.getInterfaceParams()
                        , success: function (rsp) {
                            hcCore.showSuccess('更新成功');
                            let index = me.interface.records.findIndex(item => item.interface_id == rsp.data.interface_id);
                            me.$set(me.interface.records, index, rsp.data)
                            me.interfaceEdit.visible = false;
                        }
                    });
                } else {
                    return false;
                }
            });
        }
        , onDevUpdate: function () {
            let me = this;
            let url = '/PageDev/Update';
            hcCore.post({
                url: url
                , param: {
                    dev_name: me.devInfo.form.dev_name
                    , dev_desc: me.devInfo.form.dev_desc
                    , page_no: me.devInfo.form.page_no
                    , pkid: me.devInfo.form.pkid
                }
                , success: function (rsp) {
                    let item = me.devInfo.data.find(p => p.pkid == rsp.data.pkid);
                    item = rsp.data;
                    me.devInfo.form.visible = false;
                }
            });
        }
        , onDelete: function (row) {
            let me = this;
            let rows = [];
            if (row) {
                rows = [row];
            }
            else {
                rows = me.$refs.tblRecords.selection;
            }
            if (rows && rows.length > 0) {
                let tips = rows.length == 1 ? ('确认要删除【' + rows[0].page_no + '】这条记录吗') : ('确认要删除选择的【' + rows.length + '】条的记录吗？')
                hcCore.confirm(tips, function () {
                    let arr = rows.map(item => { return item.page_no });
                    let nos = arr.join(',');
                    hcCore.post({
                        url: '/Page/Delete'
                        , param: {
                            page_nos: nos
                        }
                        , success: function (rsp) {
                            hcCore.showSuccess('删除成功');
                            me.removeSelectedRecords(me.pageInfo.data, arr);
                        }
                    });
                });
            }
            else {
                hcCore.showError('请选择要删除的记录');
            }
        }
        , onInterfaceDelete: function (row) {
            let me = this;
            let rows = [];
            if (row) {
                rows = [row];
            }
            else {
                //rows = me.$refs.tblRecords.selection;
            }
            if (rows && rows.length > 0) {
                let tips = rows.length == 1 ? ('确认要删除这条记录吗') : ('确认要删除选择的【' + rows.length + '】条的记录吗？')
                hcCore.confirm(tips, function () {
                    let arr = rows.map(item => { return item.page_no });
                    let nos = arr.join(',');
                    hcCore.post({
                        url: '/Interface/Delete'
                        , param: {
                            interface_ids: nos
                        }
                        , success: function (rsp) {
                            hcCore.showSuccess('删除成功');
                            arr.forEach(item => {
                                let index = me.interface.records.findIndex(node => item == node.interface_id);
                                me.interface.records.splice(index, 1);
                            });
                        }
                    });
                });
            }
            else {
                hcCore.showError('请选择要删除的记录');
            }
        }
        , onExport: function () {
            let paramArr = [];

            hcCore.handleExport('/Page/Export?' + paramArr.join('&'));
        }
        , getParams: function () {
            let param = {};
            this.edit.fields.forEach((item, index) => {
                param[item.name] = item.value;
            });
            return param;
        }
        , handlePageClick: function (data) {
            this.selected.pageNo = data.page_no;
            this.selected.sysNo = data.sys_no;
            this.getDevs();
            this.getInterfaces();
        }
        , handleDrop: function (draggingNode, dropNode, dropType, ev) {
            let me = this;
            hcCore.post({
                url: '/Page/UpdateBelong'
                , loading: false
                , param: {
                    page_no: draggingNode.key
                    , type: dropType
                    , o_page_pno: dropNode.key
                }
                , success: function () {
                    if (dropType == 'inner') {
                        me.$refs.pageInfo.store.nodesMap[dropNode.key].expanded = true;
                    }
                    return;
                }
            });
        }
        , getSelectedRecord: function (records, id) {
            let stark = [];
            stark = stark.concat(records);
            while (stark.length > 0) {
                let temp = stark.shift();
                if (temp.children && temp.children.length) {
                    stark = stark.concat(temp.children);
                }
                if (temp.page_no == id) {
                    return temp;
                }
            }
        }
        , insertRecord: function (records, data) {
            let me = this;
            let record = '';
            if (data.page_pno != '-') {
                record = me.getSelectedRecord(records, data.page_pno);
                records = record.children;
            }

            if (records.length == 0) {
                records.push(data);
            }
            else {
                let insertIndex = 0;
                for (insertIndex = 0; insertIndex < records.length; insertIndex++) {
                    if (records[insertIndex].page_orderby > data.page_orderby) {
                        break;
                    }
                }
                if (insertIndex < 0) insertIndex = 0;
                records.splice(insertIndex, 0, data);
            }
            if (data.page_pno != '-') {
                setTimeout(() => {
                    me.expandParent(record);
                }, 100);
            }
        }
        , expandParent: function (record) {
            this.$refs.pageInfo.store.nodesMap[record.page_no].expanded = true;
            if (record.page_pno != '-') {
                record = this.getSelectedRecord(this.pageInfo.data, record.page_pno);
                this.expandParent(record);
            }
        }
        , removeSelectedRecords: function (records, ids) {
            let me = this;
            if (ids.length > 0 && records.length > 0) {
                for (let i = records.length - 1; i >= 0; i--) {
                    let index = ids.indexOf(records[i].page_no);
                    if (index > -1) {
                        records.splice(i, 1);
                        ids.splice(index, 1);
                    }
                    else {
                        if (records[i] && records[i].children && records[i].children.length > 0) {
                            me.removeSelectedRecords(records[i].children, ids);
                        }
                    }
                }
            }
        }
        , getDevs: function () {
            let me = this;
            hcCore.post({
                url: '/PageDev/List'
                , param: { page_no: me.selected.pageNo }
                , success: function (rsp) {
                    me.devInfo.data = rsp.data;
                }
            });
        }
        , getInterfaces: function () {
            let me = this;
            hcCore.post({
                url: '/Interface/List'
                , param: {
                    sys_no: me.selected.pageNno
                    , page_no: me.selected.sysNo
                }
                , success: function (rsp) {
                    me.interface.records = rsp.data;
                }
            });
        }
        , resetParams: function (obj) {
            obj.forEach(item => {
                item.value = '';
                if (!item.readonly) {
                    item.disabled = false;
                }
            });
        }
        , recordIndex: function (index) {
            return (this.query.page - 1) * this.query.pageSize + index + 1;
        }
    }
});